<template>
  <div>
    <div class="top">
      <div class="title">登陆</div>
      <p>登陆后可以享受更多权益哦！</p>
    </div>
    <div class="table">
      <Input
        type="text"
        placeholder="请输入手机号"
        tipText="手机号格式校验错误"
        rule="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"
        @getContent="(phone) => (this.phone = phone)"
      />
      <Input
        type="password"
        placeholder="请输入密码"
        tipText="至少包含八个字符，至少一个字母和一个数字"
        rule="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"
        @getContent="(password) => (this.password = password)"
      />
      <button id="submit" @click="requestLogin">登陆</button>
      <p id="goRegister" @click="$router.push('/register')">
        注册完成？点击前往登陆
      </p>
    </div>

    <div class="goback" @click="$router.go(-1)">
      <img src="@/assets/left.png" alt="" />
      <span>返回</span>
    </div>

    <Tip v-show="tips.isTips" :tipsText="tips.text"/>
  </div>
</template>

<script>
import Input from "@/components/Input";
import {mapState} from "vuex"
export default {
  name: "Login-View",
  components: { Input,},
  data() {
    return {
      phone: "",
      password: "",
    };
  },
  methods: {
    requestLogin() {
      const user = {
        phone: this.phone,
        password: this.password,
      };
      this.$store.dispatch("User/requestLogin", user);
      
      setTimeout(()=>{
        const user = JSON.parse(sessionStorage.getItem('user'))
        
        if(user){
            this.$router.push('/home')
        }
      },1000)
    },
  },
  computed:{
    ...mapState('User',['tips'])
  }
};
</script>

<style scoped lang="less">
.goback {
  width: 14.7vw;
  position: absolute;
  top: 4vw;
  display: flex;
  height: 8vw;
  align-items: center;
  left: 2.7vw;

  img {
    width: 6.7vw;
    height: 6.7vw;
  }

  span {
    font-size: 3.7vw;
  }
}

.top {
  height: 53.3vw;
  text-align: center;

  .title {
    font-size: 8vw;
    padding: 21.3vw 0 5.3vw 0;
  }

  p {
    color: #ababab;
    font-size: 3.7vw;
  }
}

.table {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#submit {
  width: 53.3vw;
  height: 13.3vw;
  margin: 5.3vw 0 8vw 0;
  border-radius: 6.7vw;
  border: none;
  background: #1272fe;
  color: #fff;
  font-size: 4.3vw;
}

#goRegister {
  color: #1272fe;
}
</style>